<template>
  <div class="test">
    <canvas width="400" height="400" ref="cvsRef"></canvas>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
export default defineComponent({
  name: "test",
  setup() {
    const cvsRef = ref<HTMLCanvasElement>();
    onMounted(() => {
      const ctx = cvsRef.value?.getContext("2d");
      if (ctx) {
        ctx.beginPath();
        ctx.moveTo(50, 50);
        ctx.lineTo(200, 200);
        ctx.lineTo(200, 50);
        //闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
        ctx.closePath();
        ctx.stroke();

        //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。
        // ctx.fill();
      }
    });
    return { cvsRef };
  },
});
</script>
<style scoped>
.test {
  width: 100%;
  height: 100%;
  background-color: #eee;
}
canvas {
  border: 1px solid red;
}
</style>
